<template>
  <div>
    <div style="margin-bottom:20px;">
      <el-button @click="clearDrawing">重新绘制</el-button>
      <el-button type="primary" @click="getPolygonCoordinates">确认边界</el-button>
    </div>
    <div ref="map" style="width: 100%; height: 80vh;" />
  </div>
</template>

<script>
import txMapUtil from '@/utils/tx-map-util'

export default {
  props: {
    coordinates: {
      type: Array,
      default() {
        return []
      }
    },
    label: {
      type: String,
      default() {
        return ''
      }
    },
    zoomLevel: {
      type: Number,
      default() {
        return txMapUtil.defautZommLevel
      }
    }
  },
  data() {
    return {
      map: null,
      drawingManager: null,
      polygon: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const mapOptions = {
        center: new qq.maps.LatLng(txMapUtil.centerLat, txMapUtil.centerLng),
        zoom: this.zoomLevel
      }

      this.map = new qq.maps.Map(this.$refs.map, mapOptions)

      // 启用默认的绘制控制
      this.drawingManager = new qq.maps.drawing.DrawingManager({
        drawingControl: true, // 启用默认的绘制控制
        drawingControlOptions: {
          position: qq.maps.ControlPosition.TOP_CENTER,
          drawingModes: [qq.maps.drawing.OverlayType.POLYGON] // 仅启用多边形绘制模式
        },
        map: this.map
      })

      // 确保多边形绘制模式已启用
      if (this.drawingManager) {
        this.drawingManager.setDrawingMode(qq.maps.drawing.OverlayType.POLYGON)
      }

      // 监听绘制完成事件
      qq.maps.event.addListenerOnce(this.drawingManager, 'polygoncomplete', (polygon) => {
        this.polygon = polygon
        qq.maps.event.clearListeners(this.drawingManager, 'polygoncomplete')
        this.drawingManager.setDrawingMode(null) // 禁用绘制模式
      })

      // 绘制已有的多边形
      if (this.coordinates != null && this.coordinates.length > 0) {
        // 定义多边形的坐标点数组
        var polygonPath = []
        this.coordinates.map((point) => {
          polygonPath.push(new qq.maps.LatLng(point.latitude, point.longitude))
        })
        // 创建多边形对象
        this.polygon = new qq.maps.Polygon({
          map: this.map,
          path: polygonPath // 多边形的坐标点数组
          // strokeColor: new qq.maps.Color(0, 0, 255, 0.5), // 边线颜色，蓝色半透明
          // strokeWeight: 2, // 边线宽度
          // fillColor: new qq.maps.Color(0, 0, 255, 0.2) // 填充颜色，蓝色半透明
        })
        // 标记中心点
        const centerPoint = txMapUtil.calculateCenter(this.coordinates)
        this.map.setCenter(new qq.maps.LatLng(centerPoint.latitude, centerPoint.longitude))
        const marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(centerPoint.latitude, centerPoint.longitude), // 坐标点的经纬度
          map: this.map // 将标记添加到地图上
        })
        // 显示标签
        if (this.label != null && this.label !== '') {
          // 创建标签内容
          const label = new qq.maps.Label({
            position: marker.getPosition(), // 标签的位置与标记相同
            map: this.map,
            content: this.label // 标签内容
          })

          // 显示标签
          label.setVisible(true)
        }

        // 在地图上绘制多边形
        this.polygon.setMap(this.map)
      }
    },
    getPolygonCoordinates() {
      if (this.polygon) {
        const polygonPath = this.polygon.getPath() // 获取多边形的路径对象
        const coordinates = polygonPath.getArray().map((point) => {
          return { latitude: point.lat, longitude: point.lng }
        })
        this.$emit(
          'on-select',
          coordinates
        )
      } else {
        console.log('请先绘制多边形')
      }
    },
    clearDrawing() {
      // 清除绘制的多边形（假设你已经跟踪了绘制的多边形对象）
      if (this.polygon) {
        this.polygon.setMap(null)
      }
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>
